<template>
  <div style="text-align: left; background-color: white;">
    <!--账号信息，绑定银行卡等-->
    <div style="margin-left: 10px">
      <div>
        <div style="margin-bottom: 5px;">
          <span style="font-weight: bold;">账号信息</span><span style="color: #999999;margin-left: 160px"
                                                            @click="nameInfo()">修改</span>
        </div>
        <div style="margin-bottom: 5px">
          <span>银行卡号:</span>
          <span v-if="form.kh==null" class="weibangding">未绑定，请点击</span>
          <a v-if="form.kh==null" @click="nameInfo()">进入绑定</a>
          <span v-if="form.kh!=''">{{ this.form.kh }}</span>
        </div>

        <div style="margin-bottom: 5px">
          <span>开户行:</span>
          <span v-if="form.khh==null" class="weibangding">未绑定，请点击</span>
          <a v-if="form.khh==null" @click="nameInfo()">进入绑定</a>
          <span v-if="form.khh!=''">{{this.form.khh}}</span>
        </div>

        <div style="margin-bottom: 5px">
          <span>开户名:</span>
          <span class="weibangding" v-if="form.t_name==''">未绑定，请点击</span>
          <a v-if="form.t_name==''" @click="nameInfo()">进入绑定</a>
          <span v-if="form.t_name!=''">{{ this.form.t_name}}</span>
        </div>
      </div>


      <div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!--订单收益-->
          <el-tab-pane label="订单收益" name="first">
            <div class="block" >
              <el-date-picker
                v-model="pagess.time"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
              <el-button type="primary" style="margin-left: 20px" round @click="selectmh()">查询</el-button>
              <el-button round @click="tx">提现</el-button>
              <div  class="ss1">
                <span class="span1">总收入:</span><span class="span2">{{count}}￥</span><br/>
                <!--<el-badge :value="1200" class="item">-->
                <!--<el-button size="small">总收入</el-button>-->
                <!--</el-badge>-->
              </div>
            </div>


            <!--订单收益-->
            <div style="margin-top: 20px;">
              <el-table
                :data="tableData"
                border>
                <el-table-column
                  prop="order_number"
                  label="订单号"
                >
                </el-table-column>
                <el-table-column
                  width="250px"
                  prop="course_name"
                  label="课程信息">
                </el-table-column>
                <el-table-column
                  prop="payment_time"
                  label="购买时间">
                </el-table-column>
                <el-table-column
                  prop="uname"
                  label="购买人">
                </el-table-column>
                <el-table-column
                  prop="actual_amount"
                  label="价格">
                </el-table-column>
                <el-table-column
                  prop="teacher_income"
                  label="收入">
                </el-table-column>
              </el-table>
              <div class="block" style="margin:auto;text-align: center;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagess.currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pagess.pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagess.total">
                </el-pagination>
              </div>

              <div >

                <div class="ss2">
                  <el-dialog
                    title="提现"
                    :visible.sync="dialogVisible"
                    width="25%"
                    :before-close="handleClose">
                    <span class="span1" style="font-size: 15px;margin-left: 20px">可提现:</span><span class="span2">{{ktxcounts}}￥</span><br/>
                    <el-badge :value="this.ktxcounts" class="item" style="margin-bottom: 20px;margin-left: 20px ">
                      <el-button size="small">可提现</el-button>
                    </el-badge>
                    <el-form label-width="80px">
                    <el-form-item label="提现金额"prop="sName">
                      <el-input v-model="txvalues"type="number"></el-input>
                    </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="qdtx">确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
              </div>

            </div>

          </el-tab-pane>
          <!--提现记录选项卡内容-->
          <el-tab-pane label="提现记录" name="second">
            <div>
              <el-table
                :data="tableInfo"
                border>
                <el-table-column
                  prop="drawal_time"
                  label="提现时间">
                </el-table-column>
                <el-table-column
                  prop="drawal_money"
                  label="金额">
                </el-table-column>
                <el-table-column
                  prop="kh"
                  label="银行卡账号">
                </el-table-column>
                <el-table-column
                  prop="khname"
                  label="开户人">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==0">提现失败</span>
                    <span v-if="scope.row.status==1">已提现</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>


          <!--借款信息选项卡-->
          <el-tab-pane label="结款信息" name="third">
            <div style="margin-left: 50px;">
              <el-form ref="form" :model="form" label-width="80px" :rules="rule">

                <el-form-item label="银行卡号" prop="kh">
                  <el-input v-model="form.kh" style="width: 300px;" :disabled="form.ykid!=null"></el-input>
                </el-form-item>

                <el-form-item label="开户人" prop="t_name">
                  <el-input v-model="form.khname" style="width: 300px;" ></el-input>
                </el-form-item>

                <el-form-item label="开户行" prop="khh">
                  <el-input v-model="form.khh" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="身份证号" prop="idcard">
                  <el-input v-model="form.idcard" style="width: 300px;":disabled="form.ykid!=null"></el-input>
                </el-form-item>

                <el-form-item label="关联手机" prop="t_phone">
                  <el-input v-model="form.phone" style="width: 300px;" :disabled="form.ykid!=null"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit" :disabled="form.yk_id!=null">立即创建</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
export default {
  name: "profit",
  data() {
    return {
      txvalues:'',
      count:'',
      //可提现金额
      ktxcount:0,
      ktxcounts:0,
      dialogVisible:false,
      pagess:{
        tid:'',
        currentPage:1,
        pagesize:10,
        total:0,
        time:'',
      },
      tid:'',
      uid:'',
      // 讲师的信息
      teacherinfo: {
        bankCard: '',
        bankName: '',
        bankTeacherName: '',
      },
      //订单收益表
      tableData: [],
      //提现记录表
      tableInfo: [],
      //form表单信息
      // form: {
      //   // ykid:'',
      //   // kh: '',
      //   // khname: '',
      //   // khh: '',
      //   // idCard: '',
      //   // phone: '',
      //   // tid:''
      // }
      form:[]
      ,
      activeName: 'first',
      //日期选择开始时间
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      //日期选择结束时间

      //form表单校验
      rule: {
        //银行卡号校验
        kh: [
          {required: true, message: '请输入银行卡号', trigger: 'blur'},
          {min: 19, max: 19, message: '请输入19位银行卡号', trigger: 'blur'},
        ],
        //开户人校验
        t_name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'},
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '姓名不支持特殊字符',
            trigger: 'blur'
          }
        ],
        //开户行校验
        khh: [
          {required: true, message: '请输入开户行', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '开户行不支持特殊字符',
            trigger: 'blur'
          }
        ],
        //开户支行校验
        bankBranch: [
          {required: true, message: '请输入开户支行', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '开户支行不支持特殊字符',
            trigger: 'blur'
          }
        ],
        idcard: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {min: 15, max: 18, message: '请如实填写18位号码，以供我们核对', trigger: 'blur'},
          {
            required: true,
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入正确的身份证号码',
            trigger: 'blur'
          }
        ],
        t_phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {
            required: true,
            pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ]


      }
    }
  },
  methods: {
    qdtx(){
      if(this.txvalues<=this.ktxcounts && this.txvalues>0) {
        // if (!/^[1-9]\d*$/.test(this.txvalues)){
        //   this.$alert('请输入正确金额', '提示', {
        //     confirmButtonText: '确定',
        //   });
        // }else {
        //   alert("a");
        // }
        this.$axios.get("teacher-front/demo/withdrawal/inserOrder?txvalues="+this.txvalues+"&tid="+this.pagess.tid).then(r=>{
          //alert(JSON.stringify(r.data));
          if(r.data==1){
            this.$message.success("提现成功");
            this.queryBytid();
            this.dialogVisible=false;
          }
        })

      }else {
        this.$message.error("请正确输入价格")
      }
    },
    tx(){
      let a=(this.count)-(this.ktxcount);
      this.ktxcounts=a.toFixed(2);
      this.dialogVisible=true;

    },
    selectmh(){
      this.queryBytid();
    },
    handleCurrentChange(val){
      this.pagess.currentPage=val;
      this.queryBytid();
    }
    ,handleSizeChange(val){
      this.pagess.pagesize=val;
      this.queryBytid();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    nameInfo() {
      this.activeName = 'third';
    },
    onSubmit() {
      //创建前查询是否

      if(this.form.kh!=''){
        this.$axios.post("teacher-front/demo/bank/insertxixin",qs.stringify(this.form)).then(r=>{
          if(r.data){
            this.$message.success("绑定成功");
          }
        })
      }else{
        this.$message.error("请输入信息");
      }



    },
    queryBytid(){
      this.$axios.get("teacher-front/demo/teacher/queryByuid?uid="+this.uid).then(r=>{
        // alert(JSON.stringify(r.data.obj))
        this.pagess.tid=r.data.obj;
        this.form.tid=r.data.obj;
        this.query();
        this.querybybank();

      });
    },
    querybybank(){
      this.$axios.get("teacher-front/demo/bank/query?tid="+this.pagess.tid).then(r=>{
        alert(JSON.stringify(r.data))
        this.form=r.data;
        r.data.forEach(rr=>{
          this.form=rr;
        })
      })
    },
    query() {
      //查询基本信息
      this.$axios.post("teacher-front/demo/course-order/queryfenrun", qs.stringify(this.pagess)).then(rr => {
        //alert(JSON.stringify(rr.data))
        let a=0;
        rr.data.forEach(r=>{
          let teacherIncome = r.teacher_income;
          //alert(teacherIncome)
          a+=teacherIncome;
          //alert(a)
        })

        this.count=a.toFixed(2);
        this.tableData = rr.data;
      });
      //查询基本的数量
      this.$axios.get("teacher-front/demo/course-order/querycount?tid=" + this.pagess.tid).then(rr => {
        // alert(JSON.stringify(rr.data))
        this.pagess.total = rr.data;
      });
      //查询提现记录
      this.$axios.get("teacher-front/demo/withdrawal/queryBytid?tid=" + this.pagess.tid).then(res => {
        //alert(JSON.stringify(res.data));
        let a=0;
        res.data.forEach(r=>{
          let drawalMoney = r.drawal_money;
          a+=drawalMoney;
        });
        this.ktxcount=a;
        this.tableInfo = res.data;
      });
      //查询教师收入
      // this.$axios.get("teacher-front/demo/course-order/querymoney?tid=" + this.pagess.tid).then(rr => {
      //   // alert(JSON.stringify(rr.data))
      //   // this.tableInfo.forEach(res => {
      //   //   let drawalMoney = res.drawal_money;
      //   //   this.ktxcount += drawalMoney;
      //   // })
      //   if(rr.data>0){
      //     this.count = rr.data;
      //   }
      // });
    },

  },
  created(){
    let item = sessionStorage.getItem("uid");
    this.uid=item;
    this.queryBytid();

  }
}
</script>

<style scoped>
  .span1{
    font-size: 20px;
    color: #888888;
  }
  .span2{
    color: deepskyblue;
  }
  .ss1{
    width: 500px;
    float: left;
  }
  .ss2{

    width: 200px;
    margin-left: 300px;
  }
a {
  color: #0099FF;
}

.weibangding {
  color: #999999;
}
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
